<template>
  <div class="demand-forecast">
    <div class="toolbar">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/forecast' }">智能预测</el-breadcrumb-item>
        <el-breadcrumb-item>需求预测</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="toolbar-actions">
        <el-select v-model="selectedCategory" placeholder="选择品类" style="width: 150px; margin-right: 10px">
          <el-option label="全部品类" value="all" />
          <el-option label="手机数码" value="phone" />
          <el-option label="电脑办公" value="computer" />
          <el-option label="家用电器" value="appliance" />
        </el-select>
        <el-button type="primary" @click="handleForecast">
          <el-icon><MagicStick /></el-icon>
          开始预测
        </el-button>
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 需求概览 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
              <el-icon :size="30"><ShoppingCart /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">{{ demandData.totalDemand }}</div>
              <div class="overview-label">预测总需求</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +18.5%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
              <el-icon :size="30"><TrendCharts /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">{{ demandData.peakDemand }}</div>
              <div class="overview-label">峰值需求</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +25.3%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
              <el-icon :size="30"><User /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">{{ demandData.avgDemand }}</div>
              <div class="overview-label">日均需求</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +12.8%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="overview-item">
            <div class="overview-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
              <el-icon :size="30"><CircleCheck /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-value">{{ demandData.accuracy }}%</div>
              <div class="overview-label">预测准确率</div>
              <div class="overview-trend up">
                <el-icon><Top /></el-icon> +3.2%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 需求趋势预测 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span><el-icon><TrendCharts /></el-icon> 需求趋势预测</span>
            </div>
          </template>
          <div ref="demandTrendChartRef" style="height: 400px"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <span><el-icon><Calendar /></el-icon> 季节性分析</span>
          </template>
          <div ref="seasonalChartRef" style="height: 400px"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 热门商品需求预测 -->
    <el-card shadow="hover" style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span><el-icon><Box /></el-icon> 热门商品需求预测</span>
        </div>
      </template>
      <el-table :data="productDemandData" stripe style="width: 100%">
        <el-table-column type="index" label="排名" width="70" />
        <el-table-column prop="productName" label="商品名称" min-width="200" />
        <el-table-column prop="currentDemand" label="当前需求" width="120" />
        <el-table-column prop="forecastDemand" label="预测需求" width="120">
          <template #default="{ row }">
            <span style="color: #409eff; font-weight: bold">{{ row.forecastDemand }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="growthRate" label="增长率" width="100">
          <template #default="{ row }">
            <el-tag :type="row.growthRate > 0 ? 'success' : 'danger'">
              {{ row.growthRate > 0 ? '+' : '' }}{{ row.growthRate }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="confidence" label="置信度" width="120">
          <template #default="{ row }">
            <el-progress :percentage="row.confidence" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 市场趋势分析 -->
    <el-card shadow="hover" style="margin-top: 20px">
      <template #header>
        <span><el-icon><DataAnalysis /></el-icon> 市场趋势分析</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="12">
          <div ref="marketTrendChartRef" style="height: 300px"></div>
        </el-col>
        <el-col :span="12">
          <div ref="categoryDistChartRef" style="height: 300px"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'

const selectedCategory = ref('all')

const demandData = ref({
  totalDemand: '45,678',
  peakDemand: '8,956',
  avgDemand: '1,523',
  accuracy: 93.5
})

const productDemandData = ref([
  { productName: 'iPhone 15 Pro Max', currentDemand: 856, forecastDemand: 1245, growthRate: 45.4, confidence: 92 },
  { productName: '华为Mate 60 Pro', currentDemand: 723, forecastDemand: 1056, growthRate: 46.0, confidence: 89 },
  { productName: '小米14 Ultra', currentDemand: 645, forecastDemand: 892, growthRate: 38.3, confidence: 87 },
  { productName: 'MacBook Pro M3', currentDemand: 534, forecastDemand: 756, growthRate: 41.6, confidence: 90 }
])

const demandTrendChartRef = ref(null)
const seasonalChartRef = ref(null)
const marketTrendChartRef = ref(null)
const categoryDistChartRef = ref(null)

const handleForecast = () => {
  ElMessage.success('正在执行需求预测分析...')
}

const handleExport = () => {
  ElMessage.success('报告导出成功')
}

const initCharts = () => {
  if (demandTrendChartRef.value) {
    const chart = echarts.init(demandTrendChartRef.value)
    const option = {
      tooltip: { trigger: 'axis' },
      legend: { data: ['实际需求', '预测需求'] },
      xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
      yAxis: { type: 'value' },
      series: [
        {
          name: '实际需求',
          type: 'line',
          data: [1200, 1350, 1280, 1420, null, null, null],
          itemStyle: { color: '#409eff' },
          areaStyle: { opacity: 0.3 }
        },
        {
          name: '预测需求',
          type: 'line',
          data: [null, null, null, 1420, 1580, 1920, 1650],
          itemStyle: { color: '#67c23a' },
          lineStyle: { type: 'dashed' },
          areaStyle: { opacity: 0.3 }
        }
      ]
    }
    chart.setOption(option)
  }

  if (seasonalChartRef.value) {
    const chart = echarts.init(seasonalChartRef.value)
    const option = {
      tooltip: { trigger: 'item' },
      radar: {
        indicator: [
          { name: '春季', max: 100 },
          { name: '夏季', max: 100 },
          { name: '秋季', max: 100 },
          { name: '冬季', max: 100 }
        ]
      },
      series: [
        {
          name: '季节性需求',
          type: 'radar',
          data: [
            {
              value: [85, 65, 75, 95],
              name: '需求指数'
            }
          ]
        }
      ]
    }
    chart.setOption(option)
  }

  if (marketTrendChartRef.value) {
    const chart = echarts.init(marketTrendChartRef.value)
    const option = {
      tooltip: { trigger: 'axis' },
      xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
      yAxis: { type: 'value' },
      series: [
        {
          name: '市场需求趋势',
          type: 'bar',
          data: [3200, 3450, 3680, 4120, 4350, 4580],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#667eea' },
              { offset: 1, color: '#764ba2' }
            ])
          }
        }
      ]
    }
    chart.setOption(option)
  }

  if (categoryDistChartRef.value) {
    const chart = echarts.init(categoryDistChartRef.value)
    const option = {
      tooltip: { trigger: 'item' },
      series: [
        {
          name: '品类分布',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: '手机数码' },
            { value: 735, name: '电脑办公' },
            { value: 580, name: '家用电器' },
            { value: 484, name: '服装鞋包' }
          ]
        }
      ]
    }
    chart.setOption(option)
  }
}

onMounted(() => {
  nextTick(() => {
    initCharts()
  })
})
</script>

<style scoped lang="scss">
@use './forecast-common.scss';
</style>

